<!-- 商城个人中心 -->
<template>
	<view class="container" style="background-color: #fff;">
		<scroll-view class="scroll-Y" scroll-y="true" @scroll="scroll">
			<view>
				<view class="user-section">
					<uni-nav-bar statusBar="true" fixed="true" :color="navColor" :background="navBg" :title="'ID:' + userInfo.uid">
				
					</uni-nav-bar>
					<image class="bg" src="/static/images/center/user-bg.png"></image>
					<view class="userInfoBox">
						<view class="user-info-box">
							<view class="portrait-box">
								<image class="portrait" :src="userInfo.avatar || '../../static/images/public/head_portrait.jpg'"></image>
							</view>
							<view class="info-box">
								<view class="info-box-view">
									<text class="username">{{userInfo.nickname || '普通会员'}}</text>
									<view class="normal" v-if="userInfo.level == 0">
										<image class="normal-image" src="../../static/images/index/VIP.png" mode=""></image>
										<text class="normal-text">普通会员</text>
									</view>
								</view>
				
								<text class="phone" v-if="userInfo.phone">{{userInfo.phone}}</text>
							</view>
						</view>
						<view class="balance-box" @tap="navTo('/pages/center/balance/balance')">
							<text class="balance">{{userInfo.now_money || 0}}</text>
							<text class="name">当前余额</text>
						</view>
						<view class="vip-card-box" @tap="goVip()">
							<view class="card-bg" :style="{background:vipStyle.background2}">
								<image class="huangguan" src="../../static/images/center/vipCard.png" mode=""></image>
								<view class="desc">
									<text class="a" v-if="userInfo.level == 0">成为会员，享受更多权益</text>
									<text class="a" v-else>{{userInfo.vip_name||''}}</text>
									<text class="b" v-if="userInfo.level">到期时间:{{userInfo.valid_time}}</text>
									<view class="b-btn" :style="{background:vipStyle.background3}">
										<text class="b-btn-text">查看详情</text>
										<text class="b-btn-text cell-more yticon icon-you"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="cover-container">
						<image class="arc" src="../../static/images/center/arc.png" mode=""></image>
						<view class="tj-sction">
							<view class="tj-item" v-for="(item,index) in userInfo.shellCount.list" :key="index" @tap="navTo('/pages/center/shell/shell?id=' + item.id+'&name='+ item.name)">
								<text class="num">{{item.count||0}}</text>
								<view class="shellName">
									<image class="shellName-image" :src="item.image" mode=""></image>
									<text class="shellName-text">{{item.name}}</text>
								</view>
							</view>
						</view>
						<view class="cut"></view>
					</view>
				</view>
				
				
				<view class="cover-container" style="background-color: #fff;">
					<view class="order">
						<view class="title">
							<view class="left">
								<text class="left-text">我的订单</text>
							</view>
							<view class="right" @tap="navTo('/mall/order/order?state=0')">
								<text class="right-text">全部订单</text>
								<text class="right-text cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="orderList">
							<view class="orderItem" v-for="(item,index) in orderList" :key="index"  @tap="navTo('/mall/order/order?state=' + item.status)">
								<view class="bot" v-show="Number(item.bot) > 0">{{item.bot}}</view>
								<image class="orderItem-img" :src="'../static/images/order' + index + '.png'" mode=""></image>
								<text class="orderItem-text">{{item.name}}</text>
							</view>
							<view class="orderItem" @tap="navTo('/mall/order/refund/refundList')">
								<image class="orderItem-img" src="../static/images/order4.png" mode=""></image>
								<text class="orderItem-text">退换/售后</text>
							</view>
						</view>
					</view>
					<view class="cut"></view>
					<view class="history">
						<view class="title">
							<view class="left">
								<image class="left-image" src="../static/images/history.png" mode=""></image>
								<text class="left-text">我的足迹</text>
							</view>
							<view class="right" @tap="navTo('/mall/my/history')">
								<!-- <text>更多</text>
								<text class="cell-more yticon icon-you"></text> -->
							</view>
						</view>
						<scroll-view class="scrollX" scroll-x="true">
							<view class="historyList">
								<view class="historyItem" v-for="(item,index) in visitList" :key="index" @tap="navTo('/mall/product/product?id=' + item.id)">
									<image class="historyItem-img" :src="item.image" mode=""></image>
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 列表 -->
					<view class="list_box">
						<view class="list-cell b-b" @tap="navTo('/mall/my/address')" hover-class="cell-hover" :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../static/images/a.png" mode=""></image>
								<text class="cell-left-text cell-tit">地址管理</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="list-cell b-b" @tap="navTo()" hover-class="cell-hover" :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../static/images/b.png" mode=""></image>
								<text class="cell-left-text cell-tit">优惠券</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="list-cell b-b" @tap="navTo('/mall/my/collection')" hover-class="cell-hover" :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../static/images/c.png" mode=""></image>
								<text class="cell-left-text cell-tit">喜欢的商品</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="list-cell b-b" @tap="navTo('/mall/my/storeCollection')" hover-class="cell-hover" :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../static/images/d.png" mode=""></image>
								<text class="cell-left-text cell-tit">收藏的店铺</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
						<view class="list-cell b-b" @tap="phoneCall" hover-class="cell-hover" :hover-stay-time="50">
							<view class="cell-left">
								<image class="cell-left-img" src="../static/images/e.png" mode=""></image>
								<text class="cell-left-text cell-tit">客服热线</text>
							</view>
							<view class="cell-right">
								<text class="cell-more yticon icon-you"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import {
		getUserInfo
	} from "@/api/user.js"
	import {
		visitList
	} from "@/api/mall.js"
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				navColor: '#fff',
				navBg: "inherit",
				orderList: [{
						name: "待付款",
						status: 1,
						bot: 0,
					},
					{
						name: "待发货",
						status: 2,
						bot: 0,
					},
					{
						name: "待收货",
						status: 3,
						bot: 0,
					},
					{
						name: "待评价",
						status: 4,
						bot: 0,
					},
				],
				visitList: [],
				vipStyle: {
					background2: "",
					background3: "",
				},
				userInfo: {//app 得有
					shellCount: {
						list: []
					}
				},
				phone: uni.getStorageSync('servicePhone'),
			}
		},
		methods: {
			getUserInfo() {
				getUserInfo().then(res => {
					this.orderList[0].bot = res.data.orderStatusNum.unpaid_count
					this.orderList[1].bot = res.data.orderStatusNum.unshipped_count
					this.orderList[2].bot = res.data.orderStatusNum.received_count
					this.orderList[3].bot = res.data.orderStatusNum.evaluated_count
					res.data.shellCount.list.map((val, key) => {
						val.count = this.$api.deciml(val.count);
						return val
					});
					this.userInfo = res.data
					uni.setStorageSync("userInfo", this.userInfo)
					if (this.userInfo.level == 1) {
						this.vipStyle.background2 = "linear-gradient(90deg,rgba(173,169,150,1) 0%,rgba(234,234,234,1) 100%);"
						this.vipStyle.background3 = "#999"
					} else if (this.userInfo.level == 2) {
						this.vipStyle.background2 = "linear-gradient(90deg,rgba(246,215,214,1) 0%,rgba(164,166,201,1) 100%);"
						this.vipStyle.background3 = "#3f3f3f"
					} else if (this.userInfo.level == 3) {
						this.vipStyle.background2 = "linear-gradient(90deg,rgba(234,205,163,1) 0%,rgba(214,174,123,1) 100%);"
						this.vipStyle.background3 = "#3f3f3f"
					}
					visitList().then(res => {
						this.visitList = res.data.list
					})
				})
			},
			scroll(e) {
				this.navBg = "rgba(255,255,255," + e.detail.scrollTop / 150 + ')'
				if (e.detail.scrollTop > 10) {
					this.navColor = "rgba(0,0,0," + e.detail.scrollTop / 150 + ')'
				} else {
					this.navBg = "inherit"
					this.navColor = '#fff'
				}
			},
			phoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				})
			},
			goVip() {
				uni.navigateTo({
					url:"/pages/center/vip/vipRights"
				})
			},
			navTo(url) {
				if (!url) {
					return uni.showToast({
						icon:"none",
						title:"小普正在开发中，新功能即将上线"
					})
				}
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>
<style lang='scss' scoped>
	.container {
		padding-bottom: 50px;
		padding-bottom: calc(50px + env(safe-area-inset-bottom));
		height: 100vh;
		box-sizing: border-box;
		.scroll-Y{
			height: 100%;
		}
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
	}

	.user-section {
		width: 750rpx;
		background: linear-gradient(90deg, rgba(252, 29, 58, 1) 0%, rgba(255, 135, 52, 1) 100%);

		.bg {
			position: absolute;
			left: 18rpx;
			top: 35rpx;
			width: 732rpx;
			height: 467rpx;
		}

		.userInfoBox {
			height: calc(575rpx - 100px);
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			z-index: 1;

			.user-info-box {
				display: flex;
				align-items: center;
				position: relative;
				z-index: 1;
				height: 70rpx;
				padding: 40rpx 26rpx 0;

				.portrait {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}

				.info-box {
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding-left: 20rpx;

					.info-box-view {
						display: flex;
						align-items: center;

						.info-box-view-image {
							margin-left: 30rpx;
							width: 60rpx;
							height: 26rpx;
						}

						.username {
							font-size: 26rpx;
							font-weight: bold;
							color: rgba(255, 255, 255, 1);
							margin-bottom: 6rpx;
						}
						.normal{
							margin-left: 30rpx;
							width:120rpx;
							height:30rpx;
							background:rgba(255,255,255,.3);
							border-radius:15rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							.normal-image{
								margin-left: 0;
								margin-right: 6rpx;
								width: 16rpx;
								height: 16rpx;
							}
							.normal-text{
								font-size:16rpx;
								color:rgba(255,255,255,1);
								line-height:30rpx;
							}
						}
					}


					.phone {
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
					}
				}
			}

			.balance-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.balance {
					text-align: center;
					min-width: 150rpx;
					line-height: 70rpx;
					font-size: 50rpx;
					font-weight: bold;
					color: rgba(255, 255, 255, 1);
				}

				.name {
					line-height: 30rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}

			.vip-card-box {
				width: 686rpx;
				height: 84rpx;
				position: relative;
				padding: 0 32rpx;
				margin-bottom: -30rpx;

				.card-bg {
					width: 686rpx;
					height: 84rpx;
					border-radius: 16rpx 16rpx 0 0;
					overflow: hidden;
					box-sizing: border-box;
					padding: 18rpx 34rpx;
					background: linear-gradient(90deg, rgba(36, 59, 85, 1) 0%, rgba(20, 30, 48, 1) 100%);
					position: relative;

					.huangguan {
						position: absolute;
						left: 4rpx;
						top: 4rpx;
						width: 122rpx;
						height: 112rpx;
						opacity: .15;
					}


					.desc {
						display: flex;
						justify-content: space-between;
						position: relative;
						align-items: center;
						z-index: 2;

						.a {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba(255, 255, 255, 1);
						}

						.b {
							font-size: 20rpx;
							font-weight: 400;
							color: rgba(255, 255, 255, 1);
						}

						.b-btn {
							width: 142rpx;
							height: 34rpx;
							background: #27467A;
							border-radius: 17rpx;
							display: flex;
							justify-content: center;
							line-height: 34rpx;

							.b-btn-text {
								font-size: 20rpx;
								font-weight: 400;
								color: rgba(255, 255, 255, 1);
							}

							.cell-more {
								margin-left: 4rpx;
							}
						}
					}
				}
			}
		}
	}

	.cover-container {
		position: relative;
		z-index: 3;

		.arc {
			display: block;
			width: 750rpx;
			height: 30rpx;
		}

		.tj-sction {
			margin-top: -1px;
			@extend %section;

			.tj-item {
				@extend %flex-center;
				flex-direction: column;
				width: 25%;
				height: 120rpx;
				font-size: 24rpx;
				color: #75787d;
			}

			.num {
				font-size: 24rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 8rpx;
			}

			.shellName {
				display: flex;
				align-items: center;

				.shellName-image {
					width: 30rpx;
					height: 20rpx;
					margin-right: 6rpx;
				}

				.shellName-text {
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
			}
		}

		.cut {
			width: 750rpx;
			height: 18rpx;
			background: rgba(238, 238, 238, 1);
		}

		.history {
			padding: 20rpx 30rpx;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					align-items: center;

					.left-image {
						margin-right: 10rpx;
						width: 40rpx;
						height: 40rpx;
					}

					.left-text {
						font-size: 26rpx;
						color: rgba(32, 32, 32, 1);
					}
				}

				.right {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #666;

					.right-text:nth-of-type(2) {
						font-size: 20rpx;
						margin-left: 6rpx;
					}
				}

			}

			.scrollX {
				margin-top: 20rpx;

				.historyList {
					display: flex;
					flex-wrap: nowrap;
					height: 140rpx;

					.historyItem {
						margin-right: 20rpx;

						.historyItem-img {
							width: 140rpx;
							height: 140rpx;
							border-radius: 10rpx;
						}
					}
				}
			}
		}
		.order {
			padding: 20rpx 30rpx;
		
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
			
				.left {
					display: flex;
					align-items: center;
			
					.left-image {
						margin-right: 10rpx;
						width: 40rpx;
						height: 40rpx;
					}
			
					.left-text {
						font-size: 26rpx;
						color: rgba(32, 32, 32, 1);
					}
				}
			
				.right {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #666;
			
					.right-text:nth-of-type(2) {
						font-size: 20rpx;
						margin-left: 6rpx;
					}
				}
			
			}
			.orderList{
				display: flex;
				.orderItem{
					padding-top: 20rpx;
					width: 25%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					position: relative;
					.bot {
						position: absolute;
						box-sizing: border-box;
						top: 6rpx;
						right: 20rpx;
						font-size: 20rpx;
						background-color: #F32626;
						height: 30rpx;
						line-height: 30rpx;
						border-radius: 15rpx;
						text-align: center;
						color: #fff;
						min-width: 30rpx;
						padding: 0 8rpx;
						z-index: 2;
					}
					.orderItem-img{
						width: 46rpx;
						height: 46rpx;
					}
					.orderItem-text{
						margin-top: 20rpx;
						font-size:22rpx;
						color:rgba(32,32,32,1)
					}
				}
			}
		}


		.list_box {
			background-color: #fff;
			padding: 0 30rpx 20px;
			border-radius: 8rpx;

			.list-cell {
				font-size: 26rpx;
				position: relative;
				display: flex;
				justify-content: space-between;
				height: 83rpx;

				.bot {
					position: absolute;
					box-sizing: border-box;
					top: 26rpx;
					right: 50rpx;
					font-size: 20rpx;
					background-color: #F32626;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 15rpx;
					text-align: center;
					color: #fff;
					min-width: 30rpx;
					padding: 0 8rpx;
				}

				&.cell-hover {
					background: #fafafa;
				}

				.cell-left {
					display: flex;
					flex: 1;
					align-items: center;

					.cell-left-img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					.cell-left-text {
						flex: 1;
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
					}
				}

				.cell-right {
					color: #E5E5E5;
					line-height: 83rpx;
				}
			}
		}
	}
</style>
